$theme: "primary", "success", "danger", "warning", "info";
$theme-color: (
        "primary": rgba(30, 159, 255, 0.8),
        "success": rgba(17, 238, 153, 0.8),
        "danger": rgba(238, 11, 11, 0.8),
        "warning": rgba(241, 107, 33, 0.8),
        "info": rgba(236, 236, 236, 0.8),
);
$theme-hover-color: (
        "primary": #1e9fff,
        "success": #1e9,
        "danger": #ee0b0b,
        "warning": #f16b21,
        "info": #ececec,
);
.eg_button {
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 3px 2px 2px rgba(189, 189, 189, 0.1);

}

.eg_button[size = "small"] {
  min-width: 60px;
  height: 30px;
  font-size: 12px;
}

.eg_button[size = "medium"] {
  min-width: 90px;
  height: 45px;
  font-size: 16px;
}

.eg_button[size = "large"] {
  min-width: 120px;
  height: 60px;
  font-size: 20px;
}

@each $item in $theme {
  .eg_button[theme-type = #{$item}] {
    background-color: map-get($theme-color, $item);
    @if $item == "info" {
      color: black;
    } @else {
      color: whitesmoke;
    }

    &:hover {
      background-color: map-get($theme-hover-color, $item);
    }

    &[ghost = "true"] {
      background-color: transparent;
      @if $item == "info" {
        border: .1px solid black;
        color: black;
      } @else {
        border: .1px solid map-get($theme-hover-color, $item);
        color:  map-get($theme-hover-color, $item);
      }
    }

    &[dashed = "true"] {
      @if $item == "info" {
        border: .1px dashed black;
      } @else {
        border: .1px dashed map-get($theme-hover-color, $item);
      }
    }
  }
}

.eg_button[circle = "true"] {
  color: #aecffd;
  min-width: 40px !important;
  height: 40px !important;
  overflow: hidden;
  border-radius: 50% !important;
  max-width: 45px !important;
}

.eg_button[disabled]{
  cursor: not-allowed;
}

.eg_button[text = "true"] {
  border: none !important;
  background-color: transparent !important;
}
